import { defineComponent, ref, reactive, onMounted } from 'vue';
import BpmnJS from 'bpmn-js';
import $style from './index.module.scss';


export default defineComponent({
    setup() {
        /**
         * @description bpmn container Ref
         * @type { object }
         */
        const bpmnRef = ref(null);
        const state = reactive({
            /**
             * @description bpmn-js 实例
             * @type { object }
             */
            viewer: null,
        });

        const initBpmn = () => {
            const viewer = new BpmnJS({
                container: bpmnRef.value
            });

            return viewer;
        };

        onMounted(() => {
            state.viewer = initBpmn()
        });

        return () => (<div class={$style.bpmn}>
            <div class={$style.bpmnContainer} ref={bpmnRef} />
        </div>);
    }
});